<template>
  <div style="padding-top: 16px;">
    <div v-if="list.length === 0">
      <div class="emptyShow">
        <van-empty description="暂无团队测评记录" image="/web-hft-ee/static/img/orgCenter/no_join_enterprise.png"/>
      </div>
    </div>
    <div v-else @click="onItemClick(item)" style="position:relative;" v-for="item in list">
      <div class="evaluationItem">
        <div class="evaluationContent">
          <div class="evaluationUser">
            <img src="/web-hft-ee/static/img/common_profile.png" v-real-img="item['userPic']"/>
            <p class="ellipsis1" style="margin-left: 12px;">{{item['userNickname']}}</p>
          </div>
          <p class="ellipsis1 title">{{item['evaluateInfo']['title']}}</p>
          <p class="ellipsis1 result">{{getResultStr(item)}}</p>
        </div>
        <img :src="item['evaluateInfo']['pic']" class="evaluationImg"/>
      </div>
    </div>

  </div>
</template>

<script>
  import EvaluationAPI from "../../repo/api/EvaluationAPI";
  import {generateRouterPath} from "../../router/util";
  import {Toast} from "vant";

  export default {
    name: "evaluation-log",
    data() {
      return {list: []}
    },
    created() {
      Toast.loading({
        duration: 0,
        message: '正在加载',
        forbidClick: true,
        loadingType: "spinner",
      })
      EvaluationAPI.getOrgEvaluateResultList()
        .then((result) => {
          Toast.clear()
          this.list = result.responseData.list
        }).catch(error => {
          Toast.clear()
      })
    },
    methods: {
      getResultStr(item) {
        let result = (item['evaluateResult'] || [])[0] || {}
        return result['title'] || result['remark']
      },
      onItemClick(item) {
        let path = generateRouterPath(`/evaluation-report/${item['evaluateId']}/${item['id']}`)
        this.$router.push({path: path, query: {targetUserId: item['userid']}})
      }
    }
  }
</script>

<style scoped>
  .evaluationItem {
    width: calc(100% - 32px);
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    background-color: white;
    justify-content: space-between;
    border: 1px solid #CCCCCC;
    margin-bottom: 16px;
    border-radius: 4px;
  }

  .evaluationImg {
    object-fit: cover;
    width: 114px;
    height: 114px;
    border-radius: 0 4px 4px 0;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 20% 0%);
    flex-shrink: 0
  }

  .evaluationContent {
    margin-right: 16px;
    flex-grow: 1;
    word-break: break-all;
  }

  .evaluationUser {
    margin-left: 12px;
    color: #323334;
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .evaluationUser img {
    background-color: #1DA1F2;
    height: 24px;
    width: 24px;
    border-radius: 12px;
  }

  .title {
    color: #646668;
    font-size: 14px;
    margin-left: 12px;
  }

  .result {
    margin-top: 12px;
    margin-left: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #323334;
  }

  .emptyShow {
    width: 100%;
    height: 260px;
    position: absolute;
    top: calc(50% - 260px / 2);
  }
</style>
